<template>
	<div id="Services">
		<div class="container">
			<div class="div_class_Title">
				<span>[</span> Services  <span>]</span>
			</div>
			<p class="p_class_text">Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent. per conubia nostra, per inceptos himenaeos. Nullam ac urna eu felis dapibus condimentum sit. amet a augue.</p>
			<div class="div_class_ServiceGrid">
				<div class="col-md-4 div_class_Grid">
					<div class="div_class_Left">
						<i class="glyphicon glyphicon-globe" aria-hidden="true"></i>
					</div>
					<div class="div_class_Right">
						<h4>UX design</h4>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore oluptate velit es pariatur</p>
					</div>
				</div>
				<div class="col-md-4 div_class_Grid">
					<div class="div_class_Left">
						<i class="glyphicon glyphicon-signal" aria-hidden="true"></i>
					</div>
					<div class="div_class_Right">
						<h4>UI Design</h4>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore oluptate velit es pariatur</p>
					</div>
				</div>
				<div class="col-md-4 div_class_Grid">
					<div class="div_class_Left">
						<i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
					</div>
					<div class="div_class_Right">
						<h4>SEO Services</h4>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore oluptate velit es pariatur</p>
					</div>
				</div>
				<div class="col-md-4 div_class_Grid">
					<div class="div_class_Left">
						<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
					</div>
					<div class="div_class_Right">
						<h4>IOS App</h4>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore oluptate velit es pariatur</p>
					</div>
				</div>
				<div class="col-md-4 div_class_Grid">
					<div class="div_class_Left">
						<i class="glyphicon glyphicon-cloud" aria-hidden="true"></i>
					</div>
					<div class="div_class_Right">
						<h4>Android App</h4>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore oluptate velit es pariatur</p>
					</div>
				</div>
				<div class="col-md-4 div_class_Grid">
					<div class="div_class_Left">
						<i class="glyphicon glyphicon-flag" aria-hidden="true"></i>
					</div>
					<div class="div_class_Right">
						<h4>Windows App</h4>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore oluptate velit es pariatur</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style type="text/css" scoped>
  #Services{
  	margin-top: 4em;
  	width: 100%;
  	background-color: #013040;
  }
	.div_class_Title{
  	margin-top:1em; 
  	text-align: center;
  	font-size: 3.0em;
  	color: #00a0af;
  	font-family: 'Voltaire', sans-serif;
	}
	.p_class_text{
		font-size: 1.3em;
  	text-align: center;
  	width: 60%;
  	margin: 2em auto 0;
  	line-height: 1.8em;
  	color: white;
	}
	.div_class_ServiceGrid{
		float: left;
		margin: 3em 3em;
	}
	.div_class_Grid{
		margin-top:1.2em; 
	}
	.div_class_Left{
		float: left;
		width: 21%;
		margin-right: 2%;
	}
	.div_class_Right{
		float: left; 
		width: 77%;
	}
	.div_class_Grid h4{ 
		font-size: 1.4em;
    text-transform: capitalize;
    color: #fff;
	}
	.div_class_Grid p{
		color: #fff;
		line-height: 1.6em;
	}
	.div_class_Left i{
		font-size: 24px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
    border-radius: 100%;
    color: #fff;
    box-shadow: inset 0 0 0 1px #d7d7d7;
    -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
    transition: background-color 400ms,background-color 400ms;
		transition: 0.5s all;
		-webkit-transition: 0.5s all;
		-o-transition: 0.5s all;
		-moz-transition: 0.5s all;
		-ms-transition: 0.5s all;
	}
	.div_class_Grid:hover .div_class_Left i{
		background-color:  #00a0af;
    color: #fff;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 0 0 5px rgba(255,255,255,0.8);
	}
	
</style>